<template>
    <uni-drawer ref="drawer" mode="right" :width="320">
        <view class="drawer-box">
            <view class="header">
                <text class="title">{{ form.id ? '编辑用户' : '新增用户' }}</text>
                <uni-icons type="closeempty" size="24" @click="close" />
            </view>

            <view class="form">
                <view class="item">
                    <text class="label">用户名</text>
                    <input v-model="form.name" class="input" placeholder="请输入用户名" />
                </view>

                <view class="item">
                    <text class="label">手机号</text>
                    <input v-model="form.phone" class="input" placeholder="请输入手机号" type="text" />
                </view>

                <view v-if="props.password" class="item">
                    <text class="label">密码</text>
                    <!-- <input v-model="form.password" class="input" placeholder="请输入密码" :disabled="!!form.id"
                        :password="true" /> -->
                    <text class="tip">{{ props.password }}</text>
                </view>
            </view>

            <view class="footer">
                <button class="btn cancel" @click="close">取消</button>
                <button class="btn confirm" @click="submit">确定</button>
            </view>
        </view>
    </uni-drawer>
</template>

<script setup>
import { ref, reactive, nextTick } from 'vue'

const emit = defineEmits(['submit'])

const props = defineProps({
    password: {
        type: String,
        default: ''
    },
    userInfo: {
        type: Object,
        default: () => ({})
    }
})

const drawer = ref()
const form = reactive({
    id: null,
    name: '',
    phone: '',
})

// 打开抽屉（父组件调用）
const open = () => {
    console.log(props.userInfo);
    Object.assign(form, {
        id: null,
        name: '',
        phone: '',
    })
    // 2. 再赋值
    nextTick(() => {
        Object.assign(form, props.userInfo)
    })
    drawer.value.open()
}

// 关闭抽屉
const close = () => drawer.value.close()

// 提交
const submit = () => {
    if (!form.name || !form.phone) {
        uni.showToast({ title: '请填写完整', icon: 'none' })
        return
    }
    emit('submit', { ...form })
    close()
}

defineExpose({ open, close })
</script>

<style lang="scss" scoped>
.drawer-box {
    height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;

    .title {
        font-size: 32rpx;
        font-weight: 600;
    }
}

.form {
    flex: 1;
    padding: 30rpx;

    .item {
        margin-bottom: 40rpx;
    }

    .label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 12rpx;
    }

    .input {
        height: 80rpx;
        border: 2rpx solid #dcdcdc;
        border-radius: 8rpx;
        padding: 0 20rpx;
        font-size: 28rpx;

        &[disabled] {
            background: #fafafa;
        }
    }

    .tip {
        font-size: 24rpx;
        color: #999;
        margin-top: 8rpx;
        margin-left: 20rpx
    }
}

.footer {
    display: flex;
    padding: 20rpx 30rpx;
    border-top: 1rpx solid #f5f5f5;
    gap: 20rpx;

    .btn {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 8rpx;
        font-size: 30rpx;

        &.cancel {
            background: #f5f5f5;
            color: #333;
        }

        &.confirm {
            background: #007aff;
            color: #fff;
        }
    }
}
</style>